<template>
  <a-collapse v-model:activeKey="activeKey" :disabled="true">
    <!-- 施工总进度 -->
    <a-collapse-panel key="1" header="施工总进度图">
      <template #extra>
        <a-button @click.stop="onSubmit('1')" type="primary">上传</a-button>
      </template>
      <a-space :size="12" direction="vertical" v-if="processImg">
        <div class="image-text">
          <a-image :width="400" :src="processImg"> </a-image>
          <div class="text">
            <p>上传时间：</p>
            <p>{{ totalData.sgzjdtTime }}</p>
            <p>描述：</p>
            <p>{{ totalData.sgzjdtMs }}</p>
          </div>
        </div>
        <div class="tool-sidebar">
          <a-button type="primary" style="margin-bottom: 10px">
            <a
              :href="`${http}/api/project/constructionImplementation/sgzytzDownload?id=${processA}`"
            >
              下载
            </a>
          </a-button>
          <a-button type="primary" danger>
            <a-popconfirm
              title="确认删除吗"
              ok-text="确认"
              cancel-text="取消"
              @confirm="confirm(processA, '1')"
              @cancel="cancel"
            >
              <a href="#">删除</a>
            </a-popconfirm></a-button
          >
        </div>
      </a-space>
    </a-collapse-panel>
    <!-- 总平面图 -->
    <a-collapse-panel key="2" header="总平面图">
      <template #extra>
        <a-button @click.stop="onSubmit('2')" type="primary">上传</a-button>
      </template>
      <a-space :size="12" direction="vertical" v-if="totalImg">
        <div class="image-text">
          <a-image :width="400" :src="totalImg"> </a-image>
          <div class="text">
            <p>上传时间：</p>
            <p>{{ totalData.zpmtTime }}</p>
            <p>描述：</p>
            <p>{{ totalData.zpmtMs }}</p>
          </div>
        </div>
        <div class="tool-sidebar">
          <a-button type="primary" style="margin-bottom: 10px">
            <a
              :href="`${http}/api/project/constructionImplementation/sgzytzDownload?id=${totalA}`"
              >下载
            </a></a-button
          >

          <a-button type="primary" danger>
            <a-popconfirm
              title="确认删除吗"
              ok-text="确认"
              cancel-text="取消"
              @confirm="confirm(totalA, '2')"
              @cancel="cancel"
            >
              <a href="#">删除</a>
            </a-popconfirm>
          </a-button>
        </div>
      </a-space>
    </a-collapse-panel>
    <!-- 主要工程 -->
    <a-collapse-panel key="3" header="主要工程断面（坡面）图">
      <template #extra>
        <a-button @click.stop="onSubmit('3')" type="primary">上传</a-button>
      </template>
      <a-image-preview-group v-if="mainImgAndA.length">
        <a-row type="flex" justify="space-between">
          <a-col
            :span="5"
            v-for="(item, index) in mainImgAndA"
            :key="index"
            style="margin-bottom: 24px"
          >
            <a-space :size="12" style="margin-right: 10px" direction="vertical">
              <div class="image-text">
                <a-image :width="250" :src="item.img"> </a-image>
                <div class="text">
                  <p>上传时间：</p>
                  <p>{{ totalData.zygcdmtTime }}</p>
                  <p>描述：</p>
                  <p>{{ totalData.zygcdmtMs }}</p>
                </div>
              </div>
              <div class="tool-sidebar">
                <a-button type="primary" style="margin-bottom: 10px">
                  <a
                    :href="`${http}/api/project/constructionImplementation/sgzytzDownload?id=${item.a}`"
                    >下载</a
                  ></a-button
                >

                <a-button type="primary" danger>
                  <a-popconfirm
                    title="确认删除吗"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="confirm(item.a, '3')"
                    @cancel="cancel"
                  >
                    <a href="#">删除</a>
                  </a-popconfirm></a-button
                >
              </div>
            </a-space></a-col
          >
        </a-row>
      </a-image-preview-group>
    </a-collapse-panel>
  </a-collapse>
  <ProcessDia
    @close="closePro"
    :visibleOfPro="visibleOfPro"
    :totalData="totalData"
  ></ProcessDia>
</template>

<script setup>
import global from "../../global/global.vue";
import { ref } from "vue";
import {
  getSgzytzListAPI,
  sgzytzDeleteById,
} from "@/api/module/constructAndImplement";
import { message } from "ant-design-vue";
import ProcessDia from "./components/ProcessDia.vue";

const activeKey = ["1", "2", "3"];
const visibleOfPro = ref(false);

const http = process.env.VUE_APP_API_BASE_URL;

// 项目id
const projectId = global.xmid;

// 获取施工主要图纸
const totalData = ref("");
const id = ref("");
const processImg = ref(""); // 图片地址
const totalImg = ref("");
const processA = ref(""); // 图片id
const totalA = ref("");
const mainImgAndA = ref([]);
const getSgzytzList = async () => {
  const res = await getSgzytzListAPI({
    id: projectId,
  });
  totalData.value = res.data;
  console.log(totalData.value);
  if (res.data.sgzjdtPicture) {
    processImg.value = "data:image/png;base64," + res.data.sgzjdtPicture;
  } else {
    processImg.value = "";
  }
  if (res.data.zpmtPicture) {
    totalImg.value = "data:image/png;base64," + res.data.zpmtPicture;
  } else {
    totalImg.value = "";
  }
  processA.value = res.data.sgzjdt;
  totalA.value = res.data.zpmt;
  if (res.data.zygcdmt) {
    mainImgAndA.value = res.data.zygcdmt.split(",").map((item, index) => {
      return {
        img: res.data.zygcdmtPicture.map((it) => "data:image/png;base64," + it)[
          index
        ],
        a: item,
      };
    });
  } else {
    mainImgAndA.value = [];
  }
  id.value = res.data.id;
};
getSgzytzList();

// 点击删除
const confirm = async (a, type) => {
  await sgzytzDeleteById({
    pictureId: a,
    type: type,
    id: totalData.value.id,
  });
  message.success("删除成功！");
  getSgzytzList();
};

// 点击上传
const onSubmit = (whitchPartVal) => {
  console.log(whitchPartVal);
  totalData.value.whitchPartVal = whitchPartVal;
  visibleOfPro.value = true;
};

// 关闭总进度
const closePro = function () {
  visibleOfPro.value = false;
  // 重新获取
  getSgzytzList();
};
</script>

<style lang="less" scoped>
// ::v-deep .ant-collapse-header {
//   height: 60px;
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
// }
// ::v-deep .ant-collapse-content-box {
//   display: flex;
//   justify-content: center;
// }

.tool-sidebar {
  display: flex;
  flex-direction: column;
}

.image-text {
  display: flex;
  .text {
    margin-left: 20px;
    width: 100px;
    word-wrap: break-word;
  }
}
</style>
